<template>
	<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" width="500px" title="角色"
		:model-value="visible" @close="onCancel">

		<template #footer>
			<el-button key="back" @click="() => onCancel()">取消</el-button>
			<el-button key="submit" type="primary" @click="submitForm()">提交
			</el-button>
		</template>


		<el-checkbox-group v-model="userRoleList">
			 <el-checkbox v-for="item in roleList" :label="item.Id" :key="item.Id">{{ item.RoleName }}</el-checkbox>
		</el-checkbox-group>


	</el-dialog>

</template>

<script setup lang="ts">
	import {
		ref,
		defineProps,
		onMounted,
		inject,
		watch
	} from 'vue'
	import type {
		FormInstance,
		FormRules,
		ElMessageBox

	} from 'element-plus'

	import { AdminRoleList, ApiRoleList, ApiUpdateRole } from '../service'
	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		},
		onCancel: {
			type: Function,
			required: true
		},
		onSubmit: {
			type: Function,
			required: true
		},
		data: {
			type: Object,
			required: true
		}
	})

	const roleList = ref()
	const getRoleList = () => {
		let params = {
			Id: props.data.Site!
		}
		AdminRoleList(params).then(res => {
			roleList.value = res
			getUserRoleList()
		})
	}
	const userRoleList = ref()
	const getUserRoleList = () => {
		let params = {
			id: props.data.Id
		}
		ApiRoleList(params).then(res => {
			userRoleList.value = res.map(item=>item.RoleId)
		})
	}
	watch(() => props.visible, (newValue, oldValue) => {
		if (newValue) {
			console.log("onShow")
			getRoleList()
		}
	})

	/**
		* 提交
		*/
	const submitForm = async () => {
		console.log('验证成功')
		
		let params = {
			UserId: props.data.Id,
			RoleIDs: userRoleList.value
		}
		ApiUpdateRole(params).then(res => {
			props.onSubmit(params)
		})


	}
</script>

<style scoped>
</style>